import { IButtonMenu, IDomEditor } from '@wangeditor/editor'

class PreviewButtonMenu implements IButtonMenu {
  title: string
  iconSvg: string
  tag: string

  constructor() {
    this.title = '预览' // 自定义菜单标题
    this.iconSvg =
      '<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z" fill="#9b9b9b" stroke="#9b9b9b" stroke-width="3" stroke-linejoin="bevel"/><path d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z" fill="#FFF" stroke="#FFF" stroke-width="3" stroke-linejoin="bevel"/></svg>'
    this.tag = 'button'
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor: IDomEditor): string | boolean {
    return false
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor: IDomEditor): boolean {
    return false
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor: IDomEditor): boolean {
    return false
  }

  // 点击菜单时触发的函数
  exec(editor: IDomEditor) {
    if (this.isDisabled(editor)) return
    const proDom = document.querySelector(`#${editor.id}`)

    if (proDom && proDom.className.includes(' full-screen-container'))
      window['$message'].warning('全屏下不支持预览，请您在正常模式下进行预览')
    else editor.emit('onPreview')
  }
}

const previewButtonMenuConf = {
  key: 'previewMenu', // 定义 menu key
  factory() {
    return new PreviewButtonMenu()
  }
}

export default previewButtonMenuConf
